第九章 Web应用程序开发及网络爬虫
第 九 章 WEB 应 用 程 序 开 发 及 网 络 爬 虫 CS, ZJU 2018 年 12 月
Overview
Overview 9.1 Web 应 用 程 序 开 发 概 述 9.2 Web 应 用 框 架 Dash 9.3 云 上 部 署 Web 应 用 程 序 9.4 网 络 爬 虫 2 Python 程 序 设 计
9.1 Web应用程序开发概述
9.1 Web 应 用 程 序 开 发 概 述 Web 系 统 ： 以 网 站 形 式 呈 现 ， 通 过 浏 览 器 访 问 ， 完 成 一 定 功 能 的 系 统 Python 程 序 设 计 3
Web应用程序
Web 应 用 程 序 Web 应 用 程 序 是 构 建 Web 系 统 的 程 序 ， 这 类 程 序 的 最 大 好 处 是 用 户 很 容 易 访 问 系 统 ， 用 户 只 需 要 有 浏 览 器 即 可 ， 不 需 要 再 安 装 其 他 软 件 。 Web 应 用 程 序 现 在 主 要 采 用 浏 览 器 / 服 务 器 架 构 (Browser/Server, 简 称 B/S ） ， 它 能 够 很 好 地 应 用 在 广 域 网 上 ， 成 为 越 来 越 多 的 企 业 的 选 择 。 应 用 程 序 实 例 https://etf50.pythonanywhere.com 4 Python 程 序 设 计
[例9-1]极简Web应用程序
[ 例 9-1] 极 简 Web 应 用 程 序 Python 程 序 设 计 5 服 务 器 程 序 浏 览 器
Web应用程序的运行过程
Web 应 用 程 序 的 运 行 过 程 1 运 行 Python 服 务 程 序 2. 用 户 在 浏 览 器 输 入 URL 访 问 某 个 资 源 3.Flask 接 受 用 户 请 求 分 析 URL 4. 为 这 个 URL 找 到 对 应 的 处 理 函 数   5. 执 行 函 数 并 生 成 响 应 ， 返 回 给 浏 览 器 6. 浏 览 器 接 受 并 解 析 响 应 ， 将 信 息 显 示 在 页 面 中 Python 程 序 设 计 6
URL统一资源定位符
URL 统 一 资 源 定 位 符 URL 就 是 统 一 资 源 定 位 符 (Uniform Resource Locator) ， 它 的 一 般 格 式 如 下 ： protocol :// hostname[:port] / path / [;parameters][?query]#fragment URL 的 格 式 由 三 部 分 组 成 ： (1)protocol ： 第 一 部 分 就 是 协 议 ， 百 度 网 页 使 用 的 就 是 https 协 议 ； (2)hostname[:port] ： 第 二 部 分 就 是 主 机 名 ( 还 有 端 口 号 为 可 选 参 数 ) ， Flask 默 认 的 端 口 号 为 5000 ， 例 如 百 度 的 主 机 名 就 是 www.baidu.com ， 这 个 就 是 服 务 器 的 地 址 ; (3)path ： 第 三 部 分 就 是 主 机 资 源 的 具 体 地 址 ， 如 目 录 和 文 件 名 等 。 Python 程 序 设 计 7
Web应用程序开发两大部分
Web 应 用 程 序 开 发 两 大 部 分 前 端 开 发 --- 用 户 通 过 浏 览 器 显 示 的 界 面 用 HTML+CSS 后 端 开 发 --- Web 应 用 程 序 的 内 部 逻 辑 Python+Flask 或 Dash Python 程 序 设 计 8
超级文本标记语言（HTML）
超 级 文 本 标 记 语 言 （ HTML ） Python 程 序 设 计 9 超 级 文 本 标 记 语 言 （ HTML ） 是 为 网 页 创 建 而 设 计 的 一 种 标 记 语 言 。 网 页 的 本 质 就 是 超 级 文 本 标 记 语 言 ， 通 过 结 合 使 用 其 他 的 技 术 ， 可 以 创 造 出 功 能 强 大 的 网 页 。 一 个 HTML 文 件 对 应 一 个 网 页 ， 以 .htm 或 html 为 扩 展 名 。 可 以 使 用 任 何 能 够 生 成 TXT 类 型 的 文 本 编 辑 器 来 产 生 超 文 本 标 记 文 件 ， 然 后 修 改 文 件 扩 展 名 即 可 。
[例9-2]网页实例---html代码
[ 例 9-2] 网 页 实 例 ---html 代 码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width, initial-scale=1.0"> <title> 李 白 简 介 </title> </head> <body> <h1> 李 白 </h1> <!-- 李 白 的 简 介 --> <hr> 李 白 ， 字 太 白 ， 号 青 莲 居 士 ， 又 号 “ 谪 仙 人 ” ， 唐 代 伟 大 的 浪 漫 主 义 诗 人 ， 被 后 人 誉 为 “ 诗 仙 ” 。 <br> 李 白 有 《 李 太 白 集 》 传 世 ， 诗 作 中 多 以 醉 时 写 的 ， 代 表 作 有 《 望 庐 山 瀑 布 》 《 行 路 难 》 《 蜀 道 难 》 <br> 《 将 进 酒 》 《 明 堂 赋 》 《 早 发 白 帝 城 》 等 多 首 。 <br> <img src="pic1.PNG" width="350px" height="250"><img src="pic2.PNG" width="350px" height="250"> <ul> <li><a href="http://product.china-pub.com/4878243"> 李 白 求 师 </a></li> <li><a href="http://product.china-pub.com/4639796"> 诗 人 李 白 </a></li> <li><a href="http://product.china-pub.com/6876612"> 经 典 少 年 游 · 李 白 </a></li> </ul> </body> </html> Python 程 序 设 计 10
HTML常用标签---表示网页内容
HTML 常 用 标 签 --- 表 示 网 页 内 容 标 签 属 性 用 途 HTML 整 个 HTML 文 档 HEAD 文 档 头 TITLE 文 档 标 题 BODY background 、 bgcolor 文 档 主 体 内 容 H1 、 H2 、 H3 等 标 题 I ， EM 斜 体 强 调 样 式 B ， STRONG 加 粗 强 调 样 式 PRE 格 式 化 文 本 P ， SPAN ， DIV 段 落 ， 块 元 素 ， 行 内 元 素 BR 换 行 A href 超 链 接 IMG src ， width ， height 图 片 TABLE width ， border 表 格 TR 表 格 中 的 一 行 TH ， TD 表 头 / 单 元 格 OL ， UL 有 序 / 无 序 列 表 LI 列 表 DL 描 述 列 表 INPUT name 用 户 输 入 域 SELECT name 下 拉 菜 单 Python 程 序 设 计 11
层叠样式表(CSS)---网页的样式
层 叠 样 式 表 (CSS)--- 网 页 的 样 式 CSS 为 HTML 标 记 语 言 提 供 了 一 种 样 式 描 述 ， 定 义 了 其 中 元 素 的 显 示 方 式 。 CSS 提 供 了 丰 富 的 文 档 样 式 外 观 CLASS 属 性 允 许 向 一 组 在 CLASS 属 性 上 具 有 相 同 值 的 元 素 应 用 声 明 。 使 用 CLASS 属 性 来 分 类 元 素 ， 在 样 式 表 中 创 建 规 则 来 引 用 CLASS 属 性 的 值 ， 然 后 浏 览 器 自 动 将 这 些 属 性 应 用 到 该 组 元 素 。 CLASS 选 择 器 以 标 志 符 “ . ” 开 头 ， 用 于 指 示 后 面 是 哪 种 类 型 的 选 择 器 。 ID 属 性 操 作 类 似 于 CLASS 属 性 ， 但 有 一 点 重 要 的 不 同 之 处 ： ID 属 性 的 值 在 整 篇 文 档 中 必 须 是 唯 一 的 。 这 使 得 ID 属 性 可 用 于 设 置 单 个 元 素 的 样 式 规 则 。 包 含 ID 属 性 的 选 择 器 称 为 ID 选 择 器 。 需 要 注 意 的 是 ， ID 选 择 器 的 标 志 符 是 符 号 ” #” 。 Python 程 序 设 计 12
[例9-3]有CSS样式的网页
[ 例 9-3] 有 CSS 样 式 的 网 页 from flask import Flask app = Flask(__name__) @app.route("/") def hello(): return '''<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> 类 和 ID 选 择 器 的 区 别 </title> <style type="text/css"> .stress{font-weight:bold;} .bigsize{font-size:25px;} #stressid{font-weight:bold;} #bigsizeid{font-size:25px;} </style> </head> <body> <center><h1> 新 型 冠 状 病 毒 肺 炎 </h1></center> &nbsp;&nbsp;&nbsp;&nbsp; 新 型 冠 状 病 毒 肺 炎 （ Corona Virus Disease 2019 ， COVID-19 ） ， 简 称 “ 新 冠 肺 炎 ” ， 世 界 卫 生 组 织 命 名 为 “ 2019 冠 状 病 毒 病 ” ， 是 指 2019 新 型 冠 状 病 毒 感 染 导 致 的 肺 炎 。 <br> &nbsp;&nbsp;&nbsp;&nbsp;<span id="stressid">2020 年 2 月 11 日 </span> ， 世 界 卫 生 组 织 总 干 事 谭 德 塞 在 瑞 士 日 内 瓦 宣 布 ， 将 新 型 冠 状 病 毒 感 染 的 肺 炎 命 名 为 “ COVID-19” 。 2 月 21 日 ， <span class="bigsize"> 国 家 卫 生 健 康 委 </span> 发 布 了 关 于 修 订 新 型 冠 状 病 毒 肺 炎 英 文 命 名 事 宜 的 通 知 ， 决 定 将 “ 新 型 冠 状 病 毒 肺 炎 ” 英 文 名 称 修 订 为 “ COVID-19” ， 与 世 界 卫 生 组 织 命 名 保 持 一 致 ， 中 文 名 称 保 持 不 变 。 <span class="stress">2020 年 8 月 18 日 </span> ， <span id="bigsizeid"> 国 家 卫 健 委 </span> 修 订 完 成 了 新 型 冠 状 病 毒 肺 炎 诊 疗 方 案 。 </body></html> ''' if __name__ == "__main__": app.run() Python 程 序 设 计 13
常用选择器例子
常 用 选 择 器 例 子 Python 程 序 设 计 14 选 择 器 例 子 解 释 .class .stress 选 择 class=stress 的 所 有 节 点 #id #stressid 选 择 id=stressid 的 所 有 节 点 * * 选 择 的 所 有 节 点 element span 选 择 所 有 span 节 点 element element div p 选 择 div 节 点 内 部 的 所 有 p 节 点 element,element div,p 选 择 所 有 div 节 点 和 所 有 p 节 点 element>element div>p 选 择 父 节 点 为 div 节 点 的 所 有 p 节 点
HTML DOM树
HTML DOM 树   15 Data and Computation
HTML,CSS详细介绍
HTML,CSS 详 细 介 绍 MOOC 课 （ 基 础 ） ----- Web 前 端 设 计 的 1-5 章 https://www.icourse163.org/course/LYKJXY- 1207005804 MOOC 课 （ 全 面 ） -----Web 前 端 开 发 https://www.icourse163.org/course/BFU-1003382003 Python 程 序 设 计 16
9.2 Web应用框架Dash
9.2 Web 应 用 框 架 Dash Python 程 序 设 计 17 Dash 构 建 在 Flask 、 Plotly 和 React 之 上 ， 非 常 适 合 在 纯 Python 中 ， 使 用 高 度 自 定 义 的 用 户 界 面 ， 构 建 数 据 可 视 化 App 。 它 特 别 适 合 使 用 Python 进 行 数 据 分 析 的 人 。 Dash=Flask+Plotly+React Dash 应 用 程 序 在 Web 浏 览 器 中 呈 现 ， 可 以 将 应 用 程 序 部 署 到 服 务 器 ， 然 后 通 过 URL 进 行 共 享 。 由 于 Dash 应 用 程 序 是 在 Web 浏 览 器 中 进 行 查 看 ， 因 此 Dash 本 质 上 是 跨 平 台 的 。 pip install dash pip install dash-html-components pip install dash-core-components pip install dash-table Dash 用 户 手 册 ： https://dash.plotly.com/ 典 型 Dash App: https://dash-gallery.plotly.host/Portal/
类似[例9-1]程序的Dash模块实现
类 似 [ 例 9-1] 程 序 的 Dash 模 块 实 现 import dash import dash_html_components as html app = dash.Dash(__name__) app.layout = html.Div( children=[html.H1(‘Hello Python!’)] ， style={‘textAlign’: ‘center’} # 文 字 居 中 对 齐 ) if __name__ == '__main__': app.run_server() 创 建 dash 对 象 app app = dash.Dash(__name__) 定 义 app 应 用 的 界 面 app.layout = html.Div （ … ） 两 个 参 数 children=[…] 列 表 如 children 不 写 ， 则 变 为 位 置 参 数 ， 必 须 放 在 第 一 个 参 数 位 置 style={} 字 典 ， 定 义 界 面 CSS 样 式 Python 程 序 设 计 18
Dash和HTML对比
Dash 和 HTML 对 比 app = dash.Dash(__name__) index= html.Div( [html.H1(‘Hello Python!’)] ， style={'textAlign': 'center’} ) app.layout=index <html> <head> <title></title> </head> <body> <div style="text-align:center" > <h1>“Hello Python ！ ”</h1> </div> </body> </html> Python 程 序 设 计 19
[例9-4] Dash模块的使用
[ 例 9-4] Dash 模 块 的 使 用 import dash import dash_core_components as dcc import dash_html_components as html import plotly.express as px import pandas as pd external_stylesheets = [‘bWLwgP.css’] # ‘bWLwgP.css 是 样 式 文 件 app = dash.Dash(__name__, external_stylesheets=external_stylesheets) # 创 建 应 用 程 序 app data=pd.read_csv("covid_19.csv") fig=px.scatter_geo(data, locations="Country",locationmode="country names", color_discrete_sequence=px.colors.qualitative.Light24, color="Country",size="Cumulative_deaths", hover_data=["Cumulative_cases"],hover_name="Country" ) fig.update_layout(height=450) app.layout = html.Div([ #app 程 序 的 界 面 html.H1(children=' 新 型 冠 状 病 毒 肺 炎 ',style={'textAlign': 'center'}), dcc.Markdown(children=""" 新 型 冠 状 病 毒 肺 炎 （ Corona Virus Disease 2019 ， COVID-19 ） ， 简 称 “ 新 冠 肺 炎 ” ， 世 界 卫 生 组 织 命 名 为 “ 2019 冠 状 病 毒 病 ” ， 是 指 2019 新 型 冠 状 病 毒 感 染 导 致 的 肺 炎 。 """), dcc.Graph(figure=fig), dcc.Markdown(children=" 相 关 数 据 可 以 从 [ 世 界 卫 生 组 织 获 得 ](https://covid19.who.int/info)", style={'textAlign': 'center'}) ]) if __name__ == '__main__': app.run_server() Python 程 序 设 计 20
dash-html-components模块
dash-html-components 模 块 Python 可 以 使 用 dash-html-components 模 块 编 写 HTML 标 记 >>> import dash_html_components as html >>> dir(html) ['A', 'Abbr', 'Acronym', 'Address', 'Area', 'Article', 'Aside', 'Audio', 'B', 'Base', 'Basefont', 'Bdi', 'Bdo', 'Big', 'Blink', 'Blockquote', 'Br', 'Button', 'Canvas', 'Caption', 'Center', 'Cite', 'Code', 'Col', 'Colgroup', 'Command', 'Content', 'Data', 'Datalist', 'Dd', 'Del', 'Details', 'Dfn', 'Dialog', 'Div', 'Dl', 'Dt', 'Element', 'Em', 'Embed', 'Fieldset', 'Figcaption', 'Figure', 'Font', 'Footer', 'Form', 'Frame', 'Frameset', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Header', 'Hgroup', 'Hr', 'I', 'Iframe', 'Img', 'Ins', 'Isindex', 'Kbd', 'Keygen', 'Label', 'Legend', 'Li', 'Link', 'Listing', 'Main', 'MapEl', 'Mark', 'Marquee', 'Meta', 'Meter', 'Multicol', 'Nav', 'Nextid', 'Nobr', 'Noscript', 'ObjectEl', 'Ol', 'Optgroup', 'Option', 'Output', 'P', 'Param', 'Picture', 'Plaintext', 'Pre', 'Progress', 'Q', 'Rb', 'Rp', 'Rt', 'Rtc', 'Ruby', 'S', 'Samp', 'Script', 'Section', 'Select', 'Shadow', 'Slot', 'Small', 'Source', 'Spacer', 'Span', 'Strike', 'Strong', 'Sub', 'Summary', 'Sup', 'Table', 'Tbody', 'Td', 'Template', 'Textarea', 'Tfoot', 'Th', 'Thead', 'Time', 'Title', 'Tr', 'Track', 'U', 'Ul', 'Var', 'Video', 'Wbr', 'Xmp', '_', '__all__', '__builtins__', '__cached__', '__doc__', '__file__', '__loader__', '__name__', '__package__', '__path__', '__spec__', '__version__', '_basepath', '_component', '_css_dist', '_current_path', '_dash', '_filepath', '_imports_', '_js_dist', '_os', '_sys', '_this_module', 'f', 'json', 'package', 'package_name'] Python 程 序 设 计 21
Python模块和HTML的转换
Python 模 块 和 HTML 的 转 换 import dash_html_components as html html.Div([ html.H1('Hello Dash'), html.Div([ html.P('Dash converts Python classes into HTML'), html.P("This conversion happens behind the scenes by Dash's JavaScript front-end") ]) ]) 对 应 的 HTML html.Div(…) 对 应 <div>…</div>, html.H1(…) 对 应 <h1>…</h1> 多 个 元 素 用 列 表 表 示 <div> <h1>Hello Dash</h1> <div> <p>Dash converts Python classes into HTML</p> <p>This conversion happens behind the scenes by Dash's JavaScript front-end</p> </div> </div> Python 程 序 设 计 22
HTML标签的属性和CSS样式
HTML 标 签 的 属 性 和 CSS 样 式 用 style 字 典 表 示 HTML 标 签 的 属 性 和 CSS 样 式 html.Div([ html.Div('Example Div', style={'color': 'blue', 'fontSize': 14}), html.P('Example P', className ='my-class', id='my-p-element') ], style={'marginBottom': 50, 'marginTop': 25}) 该 Dash 代 码 将 呈 现 此 HTML 标 记 ： <div style="margin-bottom: 50px; margin-top: 25px;"> <div style="color: blue; font-size: 14px"> Example Div </div> <p class ="my-class", id="my-p-element"> Example P </p> </div> Python 程 序 设 计 23
用Markdown标记表示网页
用 Markdown 标 记 表 示 网 页 用 Markdown 标 记 表 示 大 段 网 页 文 字 有 时 更 加 方 便 import dash_core_components as dcc dcc.Markdown(''' #### Dash and Markdown Dash supports [Markdown](http://commonmark.org/help). Markdown is a simple way to write and format text. It includes a syntax for things like **bold text** and *italics*, [links](http://commonmark.org/help), inline `code` snippets, lists, quotes, and more. ''') Python 程 序 设 计 24
Dash应用程序结构
Dash 应 用 程 序 结 构 Dash 应 用 程 序 由 两 部 分 组 成 。 第 一 部 分 是 应 用 程 序 的 “ 布 局 ” ， 描 述 了 应 用 程 序 的 外 观 。 第 二 部 分 描 述 应 用 程 序 的 交 互 性 。 Dash 为 一 组 丰 富 的 基 于 Web 的 交 互 式 组 件 提 供 了 Python 接 口 , 不 必 编 写 Javascript 程 序 。 Dash 提 供 了 一 个 简 单 的 回 调 函 数 ， 用 于 将 自 定 义 数 据 分 析 代 码 绑 定 到 Dash 用 户 界 面 ， 实 现 高 级 交 互 。 Python 程 序 设 计 25
Div布局(layout)---程序界面设计
Div 布 局 (layout)--- 程 序 界 面 设 计 html.Div 代 表 网 页 的 一 个 区 域 ， html.Div 可 以 嵌 套 ， 最 外 层 html.Div 代 表 整 个 屏 幕 （ height,weight 用 缺 省 值 ） html.Div 的 children 参 数 是 特 殊 的 。 按 照 惯 例 ， 它 始 终 都 是 第 一 个 属 性 ， 这 意 味 着 你 可 以 省 略 它 dash_html_components 库 为 每 一 个 HTML 标 签 都 提 供 一 个 组 件 。 dash_core_components 描 述 了 更 搞 级 别 的 组 件 。 这 些 组 件 是 交 互 式 的 ， 并 通 过 JavaScript 、 HTML 和 CSS 等 生 成 。 import dash_core_components as dcc dcc.Graph 参 数 是 用 plotly 产 生 的 图 表 Python 程 序 设 计 26
[例9-5]用dash_bootstrap_components模块布局
[ 例 9-5] 用 dash_bootstrap_components 模 块 布 局 import dash ； import dash_core_components as dcc ； import dash_html_components as html import dash_bootstrap_components as dbc ； import plotly.express as px import pandas as pd ； #bootstrap.min.css 是 bootstrap 的 CSS 文 件 ， 放 在 assets 目 录 下 external_stylesheets = ['bootstrap.min.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) #covid19.jpg 是 新 冠 病 毒 图 片 文 件 ， windows 下 目 录 也 用 / 表 示 pic = '/assets/covid19.jpg' data=pd.read_csv("covid_19.csv") #covid_19.csv 是 新 冠 病 毒 数 据 文 件 fig=px.scatter_geo(data,locations="Country",locationmode="country names", color_discrete_sequence=px.colors.qualitative.Light24, color="Country",size="Cumulative_deaths", hover_data=["Cumulative_cases"],hover_name="Country") secondline=dbc.Container([dbc.Row(children=[dbc.Col([html.Br(), html.H4(“”“ 新 型 冠 状 病 毒 肺 炎 简 称 “ 新 冠 肺 炎 ” ， 世 界 卫 生 组 织 命 名 为 “ 2019 冠 状 病 毒 病 ” ， 是 指 2019 新 型 冠 状 病 毒 感 染 导 致 的 肺 炎 。 """), html.Img(src=pic,height="130px",style={'marginTop':15}),],md=3), dbc.Col(html.Div(dcc.Graph(figure=fig)),md=9) ] ) ]) app.layout = html.Div(children=[html.H1(children=' 新 型 冠 状 病 毒 肺 炎 ',style={"textAlign":"center",'marginTop':15}), # 第 一 行 secondline,# 第 二 行 dcc.Markdown(children=" 相 关 数 据 可 以 从 [ 世 界 卫 生 组 织 获 得 ](https://covid19.who.int/info)", # 第 三 行 style={'textAlign': 'center','fontSize':20}), ]) if __name__ == '__main__': app.run_server() Python 程 序 设 计 27
dash_bootstrap_components样式
dash_bootstrap_components 样 式 标 准 样 式 'bootstrap.min.css' 网 格 布 局 ： 网 格 是 一 个 12 列 的 流 体 网 格 ， 最 大 宽 度 为 960px ， 随 着 浏 览 器 / 设 备 的 缩 小 而 缩 小 。 最 大 宽 度 可 以 用 一 行 CSS 更 改 ， 所 有 列 都 将 相 应 地 调 整 大 小 。 Python 程 序 设 计 28
三行两列布局
三 行 两 列 布 局 三 行 app.layout = html.Div(children=[html.H1(children=' 新 型 冠 状 病 毒 肺 炎 ',style={"textAlign":"center",'marginTop':15}), # 第 一 行 secondline,# 第 二 行 dcc.Markdown(children=" 相 关 数 据 可 以 从 [ 世 界 卫 生 组 织 获 得 ](https://covid19.who.int/info)", # 第 三 行 style={'textAlign': 'center','fontSize':20}), ]) 两 列 secondline=dbc.Container([dbc.Row(children=[dbc.Col([html.Br(), html.H4(“”“ 新 型 冠 状 病 毒 肺 炎 简 称 “ 新 冠 肺 炎 ” ， 世 界 卫 生 组 织 命 名 为 “ 2019 冠 状 病 毒 病 ” ， 是 指 2019 新 型 冠 状 病 毒 感 染 导 致 的 肺 炎 。 """), html.Img(src=pic,height="130px",style={'marginTop':15}),],md=3), dbc.Col(html.Div(dcc.Graph(figure=fig)),md=9) ] ) ]) 一 行 分 12 格 ， md=3 表 示 占 3 格 位 置 Python 程 序 设 计 29
每个区块是—个盒子
每 个 区 块 是 — 个 盒 子 Python 程 序 设 计 30
盒子模型：https://www.runoob.com/css/css-boxmodel.html
盒 子 模 型 ： https://www.runoob.com/css/css-boxmodel.html Python 程 序 设 计 31
网页上的输入输出
网 页 上 的 输 入 输 出 dash.dependencies 模 块 的 ‘Input’ 和 ‘Output’ 负 责 程 序 的 输 入 和 输 出 。 @app.callback 表 示 回 调 函 数 Python 程 序 设 计 32
[例9-6]输入两个数求和
[ 例 9-6] 输 入 两 个 数 求 和 import dash import dash_core_components as dcc import dash_html_components as html from dash.dependencies import Input, Output external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) app.layout = html.Div([ html.H2(" 输 入 两 个 正 整 数 求 和 ",style={"textAlign":"center"}), html.Div([" 被 加 的 数 : ", dcc.Input(id='my-input1', value='0', type='text')]), html.Div([" 加 上 的 数 : ", dcc.Input(id='my-input2', value='0', type='text')]), html.Br(), html.Div(id='my-output'), ]) @app.callback(Output('my-output', component_property='children'), Input('my-input1', component_property='value'), Input('my-input2', component_property='value')) def update_output_div(value1,value2): return ' 和 等 于 : {}'.format(int(value1)+int(value2)) if __name__ == '__main__': app.run_server() Python 程 序 设 计 33
用Plotly产生的输入可以继续使用
用 Plotly 产 生 的 输 入 可 以 继 续 使 用 Python 程 序 设 计 34
[例9-7]程序
[ 例 9-7] 程 序 import dash import dash_core_components as dcc import dash_html_components as html import pandas as pd import plotly.express as px dataset=pd.read_excel("gapminder.xlsx") fig = px.scatter(dataset, x="income", y="life_exp", animation_frame="year", animation_group="country",size="income", color="continent", hover_name="country",log_x=True, size_max=45, range_x=[500,200000], range_y=[25,90], labels=dict(income=“ 人 均 收 入 (PPP 购 买 力 标 准 )",life_exp=" 人 均 寿 命 ")) app = dash.Dash(__name__) app.layout = html.Div([ html.H1( # 第 一 行 children=' 人 均 收 入 和 人 均 寿 命 关 系 图 ', style={'textAlign': 'center','color': "#111111" } # 黑 色 ), html.Div([ # 第 二 行 #Column 1 html.Div([html.Br([]), html.Br([]), # 空 行 html.H6(' 使 用 的 第 三 方 模 块 ： '), html.P('Pandas-- 数 据 分 析 '), html.P('Dash--Web 应 用 程 序 框 架 ')], className = "two columns"), #Column 2 html.Div([dcc.Graph(figure=fig)], className = "ten columns"), ],className = "row ")]) app.run_server() Python 程 序 设 计 35
CSS,JS,IMG等文件
CSS,JS,IMG 等 文 件 放 在 assets 目 录 下 ， 如 下 图 ： Dashexternal.css 文 件 在 assets 目 录 下 className = “two columns“ 等 定 义 在 这 个 文 件 中 Python 程 序 设 计 36
导航栏
导 航 栏 import dash_bootstrap_components as dbc dbc.dbc.Nal 或 NavbarSimple 方 法 设 计 导 航 栏 水 平 导 航 栏 dbc.NavbarSimple(brand="Python 程 序 设 计 --EFT50",color="dark", # 底 色 是 黑 色 dark=True, # 文 字 与 底 色 相 反 显 示 brand_href="https://baike.baidu.com/item/%E4%B8%8A%E8%AF%8150ETF/6453037 ? fr=aladdin",sticky="top") 垂 直 导 航 栏 dbc.Nav([dbc.NavLink(html.H3(" 半 年 线 图 "), href="/", active="exact"), dbc.NavLink(html.H3(“K 线 图 ” ),href="/candle",active="exact"), ],vertical="md", #vertical="md" 表 示 导 航 垂 直 显 示 Python 程 序 设 计 37
[例9-8]导航栏作为输入，多页切换（1）
[ 例 9-8] 导 航 栏 作 为 输 入 ， 多 页 切 换 （ 1 ） import dash import dash_core_components as dcc import dash_html_components as html import dash_bootstrap_components as dbc from draw import line,candle from dash.dependencies import Input, Output external_stylesheets = ['bootstrap.min.css','bWLwgP.css'] # 使 用 多 个 CSS 文 件 app = dash.Dash(__name__, external_stylesheets=external_stylesheets) first = dbc.NavbarSimple(brand="Python 程 序 设 计 --EFT50",color="dark", # 底 色 是 黑 色 dark=True, # 文 字 与 底 色 相 反 显 示 brand_href="https://baike.baidu.com/item/%E4%B8%8A%E8%AF%8150ETF/6453037?fr=aladdin" ,sticky="top") second=html.H1(children='ETF50 半 年 线 图 (2018.1.1-2018.6.30)',style={'textAlign':'center','color':"black"}) third=dbc.Container([dbc.Row([dbc.Col([html.Br([]), html.Br([]), # 空 行 dbc.Nav([dbc.NavLink(html.H3(" 半 年 线 图 "), href="/", active="exact"), dbc.NavLink(html.H3(“K 线 图 ” ),href="/candle",active="exact"), ],vertical="md", #vertical="md" 表 示 导 航 垂 直 显 示 ), html.H1(' 使 用 的 第 三 方 模 块 :'), html.H3('Pandas-- 数 据 分 析 '), html.H3('Plotly-- 绘 图 模 块 '), html.H3('Dash--Web 应 用 程 序 框 架 ') ],md=3,style={'textAlign':'right'}), dbc.Col(dcc.Graph(id='page-content'),md=9)], ) ]) Python 程 序 设 计 38
导航栏作为输入，多页切换（2）
导 航 栏 作 为 输 入 ， 多 页 切 换 （ 2 ） @app.callback(Output("page-content", "figure"), [Input("url", "pathname")]) def render_page_content(pathname): if pathname == "/": return line() else: return candle() app.layout = html.Div([dcc.Location(id="url"),first, second,html.Br([]), html.Br([]), third,html.Br([]), html.Br([])], style={"background-color":"E0E0E0"}) # 背 景 是 灰 色 app.run_server() Python 程 序 设 计 39
Flask和Dash集成
Flask 和 Dash 集 成 import flask import dash import dash_core_components as dcc import dash_html_components as html import pandas as pd import plotly.express as px external_stylesheets= ['bootstrap.min.css'] dataset=pd.read_excel("gapminder.xlsx") fig = px.scatter(dataset, x="income", y="life_exp", animation_frame="year", animation_group="country",size="income", color="continent", hover_name="country",log_x=True, size_max=45, range_x=[500,200000], range_y=[25,90], labels=dict(income=" 人 均 收 入 (PPP 购 买 力 标 准 )",life_exp=" 人 均 寿 命 ")) server = flask.Flask(__name__) @server.route('/') def index(): return 'Hello Flask ' app = dash.Dash(__name__,server=server,routes_pathname _prefix='/dash/’, external_stylesheets=external_stylesheets ) app.layout = html.Div([ html.H1( # 第 一 行 children=' 人 均 收 入 和 人 均 寿 命 关 系 图 ', style={'textAlign': 'center','color': "#111111" } # 黑 色 ), html.Div([ # 第 二 行 #Column 1 html.Div([html.Br([]), html.Br([]), # 空 行 html.H6(' 使 用 的 第 三 方 模 块 ： '), html.P('Pandas-- 数 据 分 析 '), html.P('Dash--Web 应 用 程 序 框 架 ')], md=2), #Column 2 html.Div([dcc.Graph(figure=fig)], md=10), ],md=2)]) if __name__ == '__main__': server.run() Python 程 序 设 计 40
9.3 Pythonanywhere网站部署Web应用程序
9.3 Pythonanywhere 网 站 部 署 Web 应 用 程 序 Pythonanywhere 网 站 ： www.pythonanywhere.com 选 择 Pricing& signup, 免 费 注 册 Beginner account 账 户 。 步 骤 2 ： 用 login 登 录 ， 输 入 刚 才 创 建 的 用 户 名 和 密 码 登 录 。 etf50 是 用 户 名 。 Python 程 序 设 计 41
用Flask创建最简App程序
用 Flask 创 建 最 简 App 程 序 打 开 浏 览 器 ， 输 入 域 名 ： etf50.pythonanywhere.com, 浏 览 器 会 显 示 ： Hello from Flask! 。 Python 程 序 设 计 42
上传程序到服务器
上 传 程 序 到 服 务 器 用 New directory 创 建 目 录 ， 用 Upload a file 上 传 文 件 到 云 端 。 增 加 assets 目 录 和 一 些 文 件 。 assets 目 录 下 有 文 件 bootstrap.min.css 和 bWLwgP.css 。 这 也 可 以 从 linux 终 端 看 到 。 Python 程 序 设 计 43
Linux常用命令
Linux 常 用 命 令 linux 有 各 种 字 符 表 示 目 录 ， / 表 示 根 目 录 ， . 表 示 当 前 目 录 ， .. 表 示 上 级 目 录 ， ~ 表 示 home 目 录 。 下 面 是 linux 的 一 些 常 用 命 令 。 Python 程 序 设 计 44 ls 列 文 件 和 目 录 cd 改 变 目 录 pwd 显 示 当 前 目 录 路 径 mkdir 创 建 目 录 rmdir 删 除 目 录 cp 文 件 拷 贝 cat 显 示 文 件 内 容
[例9-9]修改flask.app程序
[ 例 9-9] 修 改 flask.app 程 序 请 特 别 注 意 ， draw.py 程 序 读 文 件 用 绝 对 地 址 如 pd.read_csv("/home/etf50/mysite/etf50.csv") 具 体 程 序 见 [ 例 9-9] 。 Python 程 序 设 计 45
用Reload按钮启动Web应用程序
用 Reload 按 钮 启 动 Web 应 用 程 序 Python 程 序 设 计 46
云服务器Pythonanywhere上dash模块安装
云 服 务 器 Pythonanywhere 上 dash 模 块 安 装 选 择 Consoles, 再 选 择 Bash, 进 入 linux 命 令 行 界 面 $ pip3.7 install --user dash $ pip3.7 install --user dash-html-components $ pip3.7 install --user dash-core-components 使 用 Python 3.6 $ pip3.6 install --user dash $ pip3.6 install --user dash-html-components $ pip3.6 install --user dash-core-components Python 程 序 设 计 47
9.4 网络爬虫
9.4 网 络 爬 虫 Python 程 序 设 计 48 随 着 网 络 的 迅 速 发 展 ， 万 维 网 成 为 大 量 信 息 的 载 体 ， 如 何 有 效 地 提 取 并 利 用 这 些 信 息 成 为 一 个 巨 大 的 挑 战 。 Python 有 一 个 非 常 著 名 的 HTTP 库 requests ， 现 在 requests 库 的 作 者 又 发 布 了 一 个 新 库 ， 叫 做 requests-html ， 新 的 库 把 网 页 抓 取 和 信 息 提 取 两 个 功 能 合 二 为 一 。 安 装 requests-html 非 常 简 单 ， 一 行 命 令 即 可 做 到 。 需 要 注 意 一 点 就 是 ， requests-html 全 部 功 能 只 支 持 Python 3.6 及 以 后 的 版 本 。 。
Requests-html模块功能
Requests-html 模 块 功 能 Full JavaScript support ! CSS Selectors  (a.k.a jQuery-style, thanks to PyQuery). XPath Selectors , for the faint at heart. Mocked user-agent (like a real web browser). Automatic following of redirects. Connection–pooling and cookie persistence. The Requests experience you know and love, with magical parsing abilities. Async Support Python 程 序 设 计 49
模块的方法
模 块 的 方 法 >>> import requests_html >>> dir(requests_html) ['AsyncHTMLSession', 'BaseParser', 'BaseSession', 'Cleaner', 'DEFAULT_ENCODING', 'DEFAULT_NEXT_SYMBOL', 'DEFAULT_URL', 'DEFAULT_USER_AGENT', 'Element', 'HTML', 'HTMLResponse', 'HTMLSession ', 'HtmlElement', 'List', 'MaxRetries', 'MutableMapping', 'Optional', 'PyQuery', 'Result', 'Set', 'ThreadPoolExecutor', 'TimeoutError', 'Union', 'UserAgent', '_Attrs', '_BaseHTML', '_Containing', '_DefaultEncoding', '_Encoding', '_Find', '_ HTML ', '_LXML', '_Links', '_Next', '_NextSymbol', '_RawHTML', '_Result', '_Search', '_Text', '_URL', '_UserAgent', '_XPath', '__builtins__', '__cached__', '__doc__', '__file__', '__loader__', '__name__', '__package__', '__spec__', '_get_first_or_list', 'asyncio', 'cleaner', 'etree', 'findall', 'html_to_unicode', 'lxml', 'lxml_html_tostring', 'parse_search', 'partial', 'pyppeteer', 'requests', 'soup_parse', 'sys', 'urljoin', 'urlparse', 'urlunparse', 'user_agent', 'useragent'] Python 程 序 设 计 50
r.html子模块
r.html 子 模 块 r.html 返 回 requests_html.HTML 数 据 类 型 ， 它 是 整 个 requests_html 库 中 最 核 心 的 一 个 类 ， 负 责 对 html 文 档 进 行 解 析 。 我 们 学 习 requests_html 这 个 库 ， 其 实 也 就 是 学 习 这 个 html 类 的 使 用 方 法 。 >>> dir(r.html) ['__aiter__', '__anext__', '__class__', '__delattr__', '__dict__', '__dir__', '__doc__', '__eq__', '__format__', '__ge__', '__getattribute__', '__gt__', '__hash__', '__init__', '__init_subclass__', '__iter__', '__le__', '__lt__', '__module__', '__ne__', '__new__', '__next__', '__reduce__', '__reduce_ex__', '__repr__', '__setattr__', '__sizeof__', '__str__', '__subclasshook__', '__weakref__', '_async_render', '_encoding', '_html', '_lxml', '_make_absolute', '_pq', 'absolute_links', 'add_next_symbol', 'arender', 'base_url', 'default_encoding', 'element', 'encoding', 'find' , 'full_text', 'html', 'links', 'lxml ', 'next', 'next_symbol', 'page', 'pq', 'raw_html', 'render ', 'search', 'search_all', 'session', 'skip_anchors', ' text ', 'url', ' xpath '] Python 程 序 设 计 51
r.Html子模块常用功能
r.Html 子 模 块 常 用 功 能 r.html.links 所 有 链 接 r.html. absolute_links 绝 对 链 接 r.html.find(…… ） CSS 选 择 器 选 取 HTML 元 素 r.html.path(……) XPATH 选 取 HTML 元 素 获 取 元 素 内 容 e= r.html.find(…… ） 如 返 回 多 个 值 ， 用 列 表 e.text 文 本 e.attrs 属 性 e.html 元 素 代 码 e.search(……) 元 素 中 搜 索 Python 程 序 设 计 52
[例9-10]获取网页链接
[ 例 9-10] 获 取 网 页 链 接 Python 程 序 设 计 53 from requests_html import HTMLSession session = HTMLSession() # 创 建 一 个 会 话 r = session.get('https://docs.python.org/3.7') # 获 取 网 页 的 全 部 内 容 #r.html.absolute_links 取 网 页 链 接 ， 用 绝 对 路 径 表 示 for url in list(r.html.absolute_links)[:10]: print(url)
[例9-11] 分析HTML文档
[ 例 9-11] 分 析 HTML 文 档 from requests_html import HTML doc = """<div class="sidebar-extra"><p> 此 web 应 用 程 序 使 用 了 以 下 Python 第 三 方 库 ： </p> <ul> <li>Plotly -- 数 据 可 视 化 库 </li><li>Pandas -- 数 据 处 理 及 分 析 库 </li> <li>Tushare -- 财 经 数 据 接 口 库 </li><li>Flask -- Web 应 用 框 架 </li> </ul> </div>""" html = HTML(html=doc) ； elements=html.find('div.sidebar-extra‘) ； print(elements) print("----------------------") for element in elements: print(element.text) ； d=element.attrs # 属 性 返 回 是 字 典 print(d['class‘]) ； print("----------------------") eps=html.find('div.sidebar-extra>p‘) ； print(eps) for ep in eps: print(ep.text) ； print("----------------------") eus=html.find('div.sidebar-extra>ul') print(eus) for eu in eus: print(eu.text) Python 程 序 设 计 54
获取网页静态内容
获 取 网 页 静 态 内 容 教 育 部 2017-2018 计 算 机 科 学 与 技 术 专 业 大 学 排 名 。 “https://www.dxsbb.com/news/7566.html” ， 在 chrome 选 择 开 发 者 工 具 ， Python 程 序 设 计 55
[例9-12]获取排名程序
[ 例 9-12] 获 取 排 名 程 序 Python 程 序 设 计 56
程序运行结果
程 序 运 行 结 果 Python 程 序 设 计 57
获取json格式的地理数据：'https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json
获 取 json 格 式 的 地 理 数 据 ： 'https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json {     "type": "FeatureCollection",     "name": "100000_full",     "features": [         {             "type": "Feature",             "properties": {                 "adcode": "110000",                 "name": " 北 京 市 ",                  "center": [                     116.405285,                     39.904989                              },          。 。 。 。 。 。              {             "type": "Feature",             "properties": {                 "adcode": "120000",                 "name": " 天 津 市 ",                  "center": [                     117.190182,                     39.125596                 ],         。 。 。 。 。 。    } Python 程 序 设 计 58
网页是Json格式数据
网 页 是 Json 格 式 数 据 from requests_html import HTMLSession import jsonpath import json session = HTMLSession() url='https://geo.datav.aliyun.com/areas_v2/bound/100000_full.json' r = session.get(url) html_str=r.html.html # 把 json 格 式 字 符 串 转 换 成 python 对 象 jsonobj = json.loads(html_str) # 从 根 节 点 开 始 ， 匹 配 name,center 节 点 citylist = jsonpath.jsonpath(jsonobj,'$..name') centerlist=jsonpath.jsonpath(jsonobj,'$..center') datalist=zip(citylist[1:],centerlist) for city in datalist: print(city) (' 北 京 市 ', [116.405285, 39.904989]) (' 天 津 市 ', [117.190182, 39.125596]) (' 河 北 省 ', [114.502461, 38.045474]) (' 山 西 省 ', [112.549248, 37.857014]) (' 内 蒙 古 自 治 区 ', [111.670801, 40.818311]) (' 辽 宁 省 ', [123.429096, 41.796767]) (' 吉 林 省 ', [125.3245, 43.886841]) (' 黑 龙 江 省 ', [126.642464, 45.756967]) (' 上 海 市 ', [121.472644, 31.231706]) (' 江 苏 省 ', [118.767413, 32.041544]) (' 浙 江 省 ', [120.153576, 30.287459]) (' 安 徽 省 ', [117.283042, 31.86119]) (' 福 建 省 ', [119.306239, 26.075302]) (' 江 西 省 ', [115.892151, 28.676493]) (' 山 东 省 ', [117.000923, 36.675807]) (' 河 南 省 ', [113.665412, 34.757975]) (' 湖 北 省 ', [114.298572, 30.584355]) (' 湖 南 省 ', [112.982279, 28.19409]) (' 广 东 省 ', [113.280637, 23.125178]) (' 广 西 壮 族 自 治 区 ', [108.320004, 22.82402]) (' 海 南 省 ', [110.33119, 20.031971]) (' 重 庆 市 ', [106.504962, 29.533155]) (' 四 川 省 ', [104.065735, 30.659462]) (' 贵 州 省 ', [106.713478, 26.578343]) (' 云 南 省 ', [102.712251, 25.040609]) (' 西 藏 自 治 区 ', [91.132212, 29.660361]) (' 陕 西 省 ', [108.948024, 34.263161]) (' 甘 肃 省 ', [103.823557, 36.058039]) (' 青 海 省 ', [101.778916, 36.623178]) (' 宁 夏 回 族 自 治 区 ', [106.278179, 38.46637]) (' 新 疆 维 吾 尔 自 治 区 ', [87.617733, 43.792818]) (' 台 湾 省 ', [121.509062, 25.044332]) (' 香 港 特 别 行 政 区 ', [114.173355, 22.320048]) (' 澳 门 特 别 行 政 区 ', [113.54909, 22.198951]) Python 程 序 设 计 59
获取网页动态内容
获 取 网 页 动 态 内 容 丁 香 园 网 站 ： https://ncov.dxy.cn/ncovh5/view /pneumonia?from=singlemessa ge&isappinstalled=0 右 图 的 数 据 由 javascript 生 成 ， 普 通 方 法 无 法 取 得 完 整 数 据 使 用 requests_html 模 块 的 render 方 法 ， 取 得 数 据 Python 程 序 设 计 60
查看网页元素
查 看 网 页 元 素 从 chrome 打 开 开 发 者 工 具 选 中 “ 展 开 更 多 ” Python 程 序 设 计 61
JavaScript渲染,执行javascript程序
JavaScript 渲 染 , 执 行 javascript 程 序 有 些 网 站 是 使 用 JavaScript 渲 染 的 ， 常 规 方 法 爬 取 到 的 结 果 只 有 一 堆 JS 代 码 这 样 的 网 站 requests-html 也 可 以 处 理 ， 关 键 一 步 就 是 在 HTML 结 果 上 调 用 render 函 数 ， 它 会 在 用 户 目 录 （ 默 认 是 ~/.pyppeteer/ ） 中 下 载 一 个 chromium ， 然 后 用 它 来 执 行 JS 代 码 。 下 载 过 程 只 在 第 一 次 执 行 ， 以 后 就 可 以 直 接 使 用 chromium 来 执 行 了 。 #script 是 javascript 程 序 ， # 获 取 " 展 开 更 多 " 按 钮 ： document.getElementsByClassName("expandRow___1Y0WD") # 点 击 按 钮 ： submit[0].click() script = """() => { var submit=document.getElementsByClassName("expandRow___1Y0WD"); submit[0].click() }""" r.html. render (script=script) #JavaScript 渲 染 , 执 行 这 段 javascript 程 序 Python 程 序 设 计 62
用语句html_str=r.html.find(‘.areaBox___Sl7gp’)取数据
用 语 句 html_str=r.html.find(‘.areaBox___Sl7gp’) 取 数 据 Python 程 序 设 计 63
字符串转html格式
字 符 串 转 html 格 式 字 符 串 转 html 格 式 html = HTML(html=html_str[0].html) 取 各 省 数 据 ， 结 果 是 列 表 provinces=html.find("div.areaBlock1___3qjL7") html_str[0].html 的 结 果 >>> html_str[0].html <div class=“areaBlock1___3qjL7”><p class=“subBlock1___3cWXy”><img alt=“” src=“” class=“close___Hz1_J”/> 香 港 </p><p class=“subBlock2___2BONl”>174</p><p class=“subBlock3___3dTLM”>11,524</p><p class=“subBlock4___3SAto”>205</p><p class=“subBlock5___33XVW”>11,145</p><p class=“subBlock6___3B_P6”><span class=“alink___38BGN”><span class=“content___2NBbQ”> 详 情 </span><img alt=“icon” src=“” class=“icon___3tHFb”/></span></p></div> 。 。 。 。 。 。 Python 程 序 设 计 64
分拆数据
分 拆 数 据 for province in provinces[2:]: data=HTML(html=province.html) print(data.find("p.subBlock1___3cWXy")[0].text," ", data.find("p.subBlock2___2BONl")[0].text," ", data.find("p.subBlock3___3dTLM")[0].text," ", data.find("p.subBlock4___3SAto")[0].text," ", data.find("p.subBlock5___33XVW")[0].text) province 的 内 容 >>> province.html '<div class="areaBlock1___3qjL7"><p class="subBlock1___3cWXy"><img alt="" src="" class="close___Hz1_J"/> 香 港 </p><p class="subBlock2___2BONl">174</p><p class="subBlock3___3dTLM">11,524</p><p class="subBlock4___3SAto">205</p><p class="subBlock5___33XVW">11,145</p><p class="subBlock6___3B_P6"><span class="alink___38BGN"><span class="content___2NBbQ"> 详 情 </span><img alt="icon" src="" class="icon___3tHFb"/></span></p></div>' Python 程 序 设 计 65
获取各省covid-19数据完整程序
获 取 各 省 covid-19 数 据 完 整 程 序 from requests_html import HTMLSession from requests_html import HTML session = HTMLSession() url='https://ncov.dxy.cn/ncovh5/view/pneumonia?from=singlemessage&isappinstalled=0' r = session.get(url) #script 是 javascript 程 序 ， # 获 取 " 展 开 更 多 " 按 钮 ： document.getElementsByClassName("expandRow___1Y0WD") # 点 击 按 钮 ： submit[0].click() script = """() => { var submit=document.getElementsByClassName("expandRow___1Y0WD"); submit[0].click() }""" r.html.render(script=script) #JavaScript 渲 染 , 执 行 这 段 javascript 程 序 html_str=r.html.find('.areaBox___Sl7gp') html = HTML(html=html_str[0].html) provinces=html.find("div.areaBlock1___3qjL7") print(" 地 区 现 存 确 诊 累 计 确 诊 死 亡 治 愈 ") for province in provinces[2:]: data=HTML(html=province.html) print(data.find("p.subBlock1___3cWXy")[0].text," ",data.find("p.subBlock2___2BONl")[0].text," ", data.find("p.subBlock3___3dTLM")[0].text," ",data.find("p.subBlock4___3SAto")[0].text," ", data.find("p.subBlock5___33XVW")[0].text) Python 程 序 设 计 66